<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div>
      <div class="search">
        <el-form :inline="true" :model="form">
          <el-form-item label="合作商搜索">
            <el-input
              size="medium"
              v-model="form.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="result">
        <div class="heand">
          <el-button
            type="warning"
            size="medium"
            icon="el-icon-circle-plus-outline"
            class="new"
            @click="newform1"
            >新建</el-button
          >
        </div>
        <div class="body">
          <template>
            <el-table :data="tableData" size="small" style="width: 100%">
              <el-table-column label="序号" width="80px">
                <template slot-scope="scop">
                  {{ pageIndex * 10 + scop.$index + 1 - 10 }}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="合作商名称"></el-table-column>
              <el-table-column prop="account" label="账号"> </el-table-column>
              <el-table-column prop="vmCount" label="设备数量">
              </el-table-column>
              <el-table-column prop="ratio" label="分成比例">
                <template slot-scope="scope">
                  {{ scope.row.ratio + "%" }}
                </template>
              </el-table-column>
              <el-table-column prop="contact" label="联系人"> </el-table-column>
              <el-table-column prop="mobile" label="联系电话">
              </el-table-column>
              <el-table-column label="操作" width="250px">
                <template slot-scope="scope">
                  <el-button @click="remakepass(scope.row)" type="text" size="small">重置密码</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="openAll(scope.row)"
                    >查看详情</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="openModify(scope.row)"
                    >修改</el-button
                  >
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="title">
              <span class="text"
                >共 {{ total }} 条记录 第{{ pageIndex }}/{{ totalPage }}页</span
              >
              <div class="pageChange">
                <el-button size="small" :disabled="disabled" @click="pageUp"
                  >上一页</el-button
                >
                <el-button
                  size="small"
                  :disabled="disabledDown"
                  @click="pageDown"
                  >下一页</el-button
                >
              </div>
            </div>
          </template>
        </div>
        <newForm
          ref="modify"
          :getPointListAll="getPointListAll"
          @closeFn="closeFn"
          :change="change"
          :ListA="ListA"
          :A="A"
          :visible.sync="newform"
        ></newForm>
        <viewDetails
          @closeViewFn="closeViewFn"
          :id="id"
          :visible.sync="viewDetails"
          :Replenishment="Replenishment"
        ></viewDetails>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <span>确定要重置密码嘛宝贝</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changepassword"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { PartnersList, getPointListAll, remake } from '@/api/point'
import newForm from './components/newForm.vue'
import viewDetails from './components/viewDetails.vue'
export default {
  components: {
    newForm,
    viewDetails
  },
  computed: {
    disabled () {
      // 如果页面小于2的时候上一页就会变成黑色不能再按
      if (this.pageIndex < 2) {
        return true
      } else {
        return false
      }
    },
    disabledDown () {
      if (this.pageIndex === this.totalPage) {
        return true
      } else {
        return false
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      viewDetails: false,
      newform: false,
      form: {
        // 搜索的form表单
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [], // 页面列表
      total: '',
      pageIndex: '',
      totalPage: '',
      thisList: [],
      ListA: {},
      change: 1,
      getPointListAll: [],
      id: [],
      A: true,
      Replenishment: [],
      newId: ''
    }
  },

  async created () {
    this.getPointList()
    const { data } = await getPointListAll()
    this.getPointListAll = data.currentPageRecords
    console.log(this.getPointListAll)
  },
  methods: {
    async  changepassword () {
      this.dialogVisible = false
      await remake(this.newId).then(() => {
        return this.$message.success('重置密码成功了呢宝贝')
      })
    },
    remakepass (row) {
      this.dialogVisible = true
      this.newId = row.id
      console.log(this.newId)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },

    blurText () {
      console.log(1)
      this.form.regionId = ''
      this.getPointList()
    },
    newform1 () {
      this.newform = true
      this.A = true
    },
    async openModify (row) {
      // this.$refs.form.resetFields()
      this.$refs.modify.form = {
        contact: row.contact,
        mobile: row.mobile,
        name: row.name,
        ratio: row.ratio
      }
      this.newform = true
      this.A = false
      console.log(row)
      this.ListA = row
    },
    // 打开查看详情
    async openAll (row) {
      this.Replenishment = row
      this.viewDetails = true
    },
    closeViewFn () {
      this.viewDetails = false
    },
    // 关闭或者开启页面
    closeFn () {
      this.newform = false
      this.getPointList()
      this.ListA = {}
    },
    // 点击按钮之后进行搜索
    async onSubmit () {
      // 如果input中输入了文字进行按需筛选
      if (this.form.taskCode) {
        this.getPointList()
      } else this.getPointList() // 没有输入的后刷新页面
    },
    pageUp () {
      this.form.pageIndex = this.form.pageIndex - 1
      this.getPointList(this.form)
    },
    pageDown () {
      this.form.pageIndex = this.form.pageIndex + 1

      this.getPointList(+this.form)
    },
    // 封装一个页面列表请求函数
    async getPointList () {
      const { data } = await PartnersList(this.form)

      this.tableData = data.currentPageRecords
      this.total = data.totalCount
      this.pageIndex = data.pageIndex
      this.totalPage = data.totalPage
    }
  }
}
</script>

<style lang="scss" scoped>
// .heand{
//   // margin-top: 15px;
// }
.title {
  padding-top: 10px;
  display: flex;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px !important;
    color: #dbdfe5 !important;
  }
  .pageChange {
    margin-right: 90px;
  }
}
</style>
